<template>
  <div class="init_main">
    <p class="name_sty">{{ name }}</p>
    <el-row>
      <el-col :span="6">
        <div class="query">
          <div>
            <span class="query_lable">科室：</span>
            <el-select v-model="query.value" style="width: 267px" size="mini">
              <el-option label="test" value="test"> </el-option>
            </el-select>
          </div>
          <div class="mt10">
            <span class="query_lable">模板组：</span>
            <el-input
              v-model="query.value"
              style="width: 267px"
              size="mini"
            ></el-input>
          </div>
          <div class="mt10">
            <span class="query_lable">模板：</span>
            <el-input
              v-model="query.value"
              style="width: 183px"
              size="mini"
            ></el-input>
            <el-button
              plain
              size="mini"
              icon="el-icon-search"
              style="margin-left: 10px"
              >查询</el-button
            >
          </div>
        </div>
        <p style="line-height: 30px">模板组</p>
        <div class="tree_box">
          <el-tree
            :data="tree_data"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="tree_row_click"
            :props="defaultProps"
            v-if="tree_show"
          >
            <span slot-scope="{ data }">
              <span><i class="el-icon-folder"></i></span>
              <!-- <span v-else><i class="el-icon-document"></i></span> -->
              <span style="margin-left: 5px">{{ data.Name }}</span>
              <span v-if="!data.TotalScore">
                <el-button
                  type="text"
                  size="mini"
                  @click.stop="append(data)"
                  style="margin-left: 10px"
                >
                  添 加
                </el-button>
                <!-- <el-button
                  type="text"
                  size="mini"
                  @click.stop="remove(node, data)"
                >
                  删 除
                </el-button> -->
              </span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="18">
        <p>
          <span class="p10"
            >模板名称： <span style="color: blue">{{ tree_row.Pname }}</span>
          </span>
          <span class="p10"
            >版本名称：
            <span style="color: blue">{{ tree_row.Name }} </span></span
          >
          <span class="p10">
            总分： <span style="color: blue">{{ tree_row.TotalScore }}</span>
          </span>
        </p>
        <p>
          <span class="p10"
            >启用状态：
            <span style="color: blue">{{
              tree_row.IsShow ? "已启用" : "未启用"
            }}</span>
          </span>
          <el-button plain size="mini">下载模板</el-button>
          <el-upload
            class="upload-demo"
            style="display: inline-block; margin: 0 5px"
            :action="
              baseUrl.bsIp +
              '/api/Template/ImportTemplate?templateId=' +
              tree_row.Id
            "
            :on-success="upload_success"
            :headers="headers"
          >
            <el-button plain size="mini" type="success">导入模板</el-button>
          </el-upload>
          <el-button plain size="mini" type="danger" @click="del_tem"
            >删除模板</el-button
          >
          <el-button plain size="mini">导出模板</el-button>
        </p>
        <p style="color: red; padding: 0 10px">
          提示：请选择左侧模板后，对照上方回显标题，导入excel。
        </p>
        <div class="table">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            height="642"
            :span-method="objectSpanMethod"
            v-if="table_show"
          >
            <el-table-column prop="Content1" label="一级内容" align="center">
            </el-table-column>
            <el-table-column prop="Content2" label="二级内容" align="center">
            </el-table-column>
            <el-table-column
              prop="DeductionDetail"
              label="扣分细则"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="Score" label="分值" align="center">
            </el-table-column>
            <el-table-column
              prop="DeductionWay"
              label="扣分方式"
              align="center"
            >
              <template slot-scope="scope">
                <span style="color: blue">{{ scope.row.DeductionWay }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="Option" label="选项" align="center">
            </el-table-column>
            <el-table-column prop="Sort" label="排序" align="center">
            </el-table-column>
            <el-table-column prop="Redline" label="红线问题" align="center">
            </el-table-column>
            <el-table-column prop="Analysis" label="分析点" align="center">
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <!-- 弹层 -->
    <el-dialog
      :title="dialog_title"
      :visible.sync="dialogVisible"
      width="45%"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <table border="1" style="width: 100%">
        <!-- <tr>
          <td class="tac">新增类型：</td>
          <td>
            <el-radio-group v-model="form.新增类型" size="mini">
              <el-radio-button label="模板"></el-radio-button>
              <el-radio-button label="版本"></el-radio-button>
            </el-radio-group>
          </td>
        </tr> -->
        <template v-if="form.新增类型 == '模板'">
          <tr>
            <td class="tac">模板名称：</td>
            <td><el-input size="mini" v-model="form.模板名称"></el-input></td>
          </tr>
          <tr>
            <td class="tac">表单编号：</td>
            <td><el-input size="mini" v-model="form.表单编号"></el-input></td>
          </tr>
          <tr>
            <td class="tac">是否是默认模板：</td>
            <td>
              <el-select
                v-model="form.是否是默认模板"
                multiple
                placeholder=""
                size="mini"
                style="width: 100%"
              >
                <el-option label="是" value="是"> </el-option>
                <el-option label="否" value="否"> </el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td class="tac">模板等级：</td>
            <td><el-input size="mini" v-model="form.模板等级"></el-input></td>
          </tr>
          <tr>
            <td class="tac">是否是附加分模板：</td>
            <td>
              <el-select
                v-model="form.是否是附加分模板"
                multiple
                placeholder=""
                size="mini"
                style="width: 100%"
              >
                <el-option label="是" value="是"> </el-option>
                <el-option label="否" value="否"> </el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td class="tac">总分：</td>
            <td><el-input size="mini" v-model="form.总分"></el-input></td>
          </tr>
          <tr>
            <td class="tac">合格分：</td>
            <td><el-input size="mini" v-model="form.合格分"></el-input></td>
          </tr>
          <tr>
            <td class="tac">排序：</td>
            <td><el-input size="mini" v-model="form.排序"></el-input></td>
          </tr>
          <tr>
            <td class="tac">备注：</td>
            <td>
              <el-input
                type="textarea"
                :rows="6"
                v-model="form.备注"
              ></el-input>
            </td>
          </tr>
        </template>
        <template v-else>
          <tr>
            <td class="tac">是否启用：</td>
            <td>
              <el-switch
                v-model="form.isShow"
                active-color="#13ce66"
                inactive-color="#ff4949"
                size="mini"
              >
              </el-switch>
            </td>
          </tr>
          <tr>
            <td class="tac">模板名称：</td>
            <td><el-input size="mini" v-model="form.name"></el-input></td>
          </tr>
          <tr>
            <td class="tac">版本：</td>
            <td>
              <el-input size="mini" v-model="form.templateVersion"></el-input>
            </td>
          </tr>
          <tr>
            <td class="tac">表单编号：</td>
            <td><el-input size="mini" v-model="form.code"></el-input></td>
          </tr>
          <tr>
            <td class="tac">模板等级：</td>
            <td>
              <el-select
                v-model="form.level"
                placeholder=""
                size="mini"
                style="width: 100%"
              >
                <el-option label="一级内容" value="一级内容"> </el-option>
                <el-option label="二级内容" value="二级内容"> </el-option>
                <el-option label="三级内容" value="三级内容"> </el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td class="tac">模板类型：</td>
            <td>
              <el-input
                size="mini"
                v-model="form.systemCategory"
                disabled
              ></el-input>
            </td>
          </tr>
          <tr>
            <td class="tac">是否附加分模板：</td>
            <td>
              <el-switch
                v-model="form.isAppend"
                active-color="#13ce66"
                inactive-color="#ff4949"
                size="mini"
              >
              </el-switch>
            </td>
          </tr>
          <tr>
            <td class="tac">总分：</td>
            <td>
              <el-input size="mini" v-model="form.totalScore"></el-input>
            </td>
          </tr>
          <tr>
            <td class="tac">合格分：</td>
            <td>
              <el-input size="mini" v-model="form.passScore"></el-input>
            </td>
          </tr>
          <tr>
            <td class="tac">排序：</td>
            <td>
              <el-input size="mini" v-model="form.sort"></el-input>
            </td>
          </tr>
          <tr>
            <td class="tac">备注：</td>
            <td>
              <el-input
                v-model="form.remark"
                type="textarea"
                :rows="6"
              ></el-input>
            </td>
          </tr>
        </template>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose" size="mini">关 闭</el-button>
        <el-button type="primary" @click="btn_ok" size="mini">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      query: {},
      tree_data: [],
      init_tree_data: [],
      tableData: [],
      dialogVisible: false,
      form: {
        isShow: true,
        isDefault: true,
        isAppend: false,
        systemCategory: "满意度调查",
      },
      dialog_title: "",
      tree_row: {},
      courseArr: [],
      coursePos: 0,
      defaultProps: {
        children: "children",
        label: "Name",
      },
      tree_show: true,
      table_show: true,
      headers: {
        Token: window.sessionStorage.getItem("Token"),
      },
      baseUrl: baseUrl,
    };
  },
  mounted() {
    this.name = this.$route.meta.title;
    this.getTree();
  },
  methods: {
    getTree() {
      var body = {
        CurrentPage: 1,
        pageSize: 999,
        filter: {
          SystemCategory: "满意度调查",
        },
      };
      this.$post("/TemplateGroup/GetPageList", body).then((res) => {
        this.tree_data = res.Data.PageList;
        this.init_tree_data = res.Data.PageList;
      });
    },
    handleClose() {
      this.form = {
        isShow: true,
        isDefault: true,
        isAppend: false,
      };
      this.dialogVisible = false;
    },
    btn_ok() {
      this.$post("/Template/Create", this.form).then((res) => {
        this.getTree_chinde(this.form.groupId);
        this.handleClose();
      });
    },
    getTree_chinde(id) {
      this.tree_show = false;
      this.tree_data = this.init_tree_data;
      var body = {
        currentPage: 1,
        pageSize: 999,
        filter: {
          hasDisable: true,
          orderByStr: "",
          groupId: id,
        },
      };
      this.$post("/Template/GetPageList", body).then((res) => {
        for (var i in this.tree_data) {
          if (this.tree_data[i].Id == id) {
            var list = [];
            for (var j in res.Data.PageList) {
              var item = res.Data.PageList[j];
              item.Pname = this.tree_data[i].Name;
              list.push(item);
            }
            this.tree_data[i].children = list;
          }
        }
        this.tree_show = true;
        console.log(this.tree_data);
      });
    },
    append(data) {
      console.log(data);
      (this.form = {
        isShow: true,
        isDefault: true,
        isAppend: false,
        systemCategory: "满意度调查",
      }),
        (this.dialogVisible = true);
      this.form.groupId = data.Id;
    },
    remove(node, data) {
      console.log(node, data);
    },
    tree_row_click(data, node) {
      console.log(data);
      if (data.TotalScore) {
        this.getTable_data(data.Id);
        this.tree_row = data;
      } else {
        this.getTree_chinde(data.Id);
      }
    },
    getTable_data(id) {
      this.table_show = false;
      var body = {
        currentPage: 1,
        pageSize: 999,
        filter: {
          hasDisable: true,
          orderByStr: "",
          templateId: id,
        },
      };
      this.$post("/TemplateData/GetPageList", body).then((res) => {
        this.tableData = res.Data.PageList;
        this.courseinit();
        this.table_show = true;
      });
    },
    upload_success(response, file, fileList) {
      console.log(response);
      if (response.StatusCode != 200) {
        this.$notify.error({
          title: "错误",
          message: response.Errors,
        });
      } else {
        this.getTable_data(this.tree_row.Id);
      }
    },
    // 领域合并
    courseinit() {
      // 首先初始化
      var _this = this;
      this.courseArr = [];
      this.coursePos = 0;
      for (var i = 0; i < _this.tableData.length; i++) {
        //判断是否是第一行
        if (i === 0) {
          //导入第一行数据
          _this.courseArr.push(1);
          _this.coursePos = 0;
        } else {
          //不是第一行时，就根据标识去存储，course为我第一行的prop属性的值
          if (_this.tableData[i].Content1 === _this.tableData[i - 1].Content1) {
            // 查找到下一行的数据等于上一行的数据时每次要把之前存储的数据+1
            _this.courseArr[_this.coursePos] += 1;
            _this.courseArr.push(0);
          } else {
            // 没有相同的数据时候，要记住当前的index
            _this.courseArr.push(1);
            _this.coursePos = i;
          }
        }
      }
      console.log(this.courseArr);
      console.log(this.coursePos);
    },
    //然后开始写组件自带的方法，
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const row1 = this.courseArr[rowIndex];
        const col1 = row1 > 0 ? 1 : 0;
        return {
          rowspan: row1,
          colspan: col1,
        };
      }
    },
    del_tem() {
      this.$get("/Template/SoftDelete/" + this.tree_row.Id).then((res) => {
        this.$notify({
          title: "提示",
          message: "操作成功！",
          type: "success",
        });
        this.getTree();
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.init_main {
  background-color: #fff;
  height: calc(100vh - 60px);
  border: 1px solid #333;
  border-radius: 5px;
  margin: 5px;
  padding: 10px;
  font-family: "FangSong";
  .name_sty {
    color: #000;
    font-weight: 700;
    font-size: 18px;
    font-family: "FangSong";
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
  }
  .query {
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
  }
  .query_lable {
    display: inline-block;
    width: 60px;
  }
  .tree_box {
    height: calc(100vh - 290px);
    overflow: auto;
  }
}
.mt10 {
  margin-top: 10px;
}
.tac {
  text-align: center;
}
.p10 {
  padding: 10px;
}
::v-deep .el-upload__input {
  display: none;
}
::v-deep .el-upload-list {
  display: none;
}
</style>